<template>
    <el-form
        label-width="100px"
        class="demo-ruleForm"
        :model="addInsuresData"
        :rules="rules"
        ref="addInsuresData"
    >
        <el-form-item label="保险名称" prop="name">
            <el-input
                v-model="addInsuresData.name"
                class="inputText"
                placeholder="请输入保险名称"
            ></el-input>
        </el-form-item>
        <el-form-item label="保险描述" prop="brief">
            <el-input
                v-model="addInsuresData.brief"
                class="inputText"
                placeholder="请输入保险描述"
            ></el-input>
        </el-form-item>
        <el-form-item label="保险分类" prop="typesId">
            <el-select
                v-model="addInsuresData.typesId"
                placeholder="请选择保险分类"
            >
                <el-option
                    v-for="item in typeArr"
                    :key="item._id"
                    :label="item.name"
                    :value="item._id"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="缴费类型" prop="payType">
            <el-select
                v-model="addInsuresData.payType"
                placeholder="请选择缴费类型"
            >
                <el-option label="日交" value="日交"></el-option>
                <el-option label="月交" value="月交"></el-option>
                <el-option label="季交" value="季交"></el-option>
                <el-option label="年交" value="年交"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="适用人群" prop="suitableFor">
            <el-select
                v-model="addInsuresData.suitableFor"
                placeholder="请选择适用人群"
            >
                <el-option label="18-25" value="18-25"></el-option>
                <el-option label="25-40" value="25-40"></el-option>
                <el-option label="40-55" value="40-55"></el-option>
                <el-option label="55-65" value="55-65"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="可否续保" prop="renew">
            否 <el-switch v-model="addInsuresData.renew"></el-switch> 是
        </el-form-item>
        <el-form-item label="上传封面图" prop="coverMap">
            <el-upload
                class="upload-demo"
                action="http://localhost:3000/images//uploadImages"
                :show-file-list="false"
                :on-success="handleCoverMap"
            >
                <el-button size="small" type="primary">点击上传</el-button>
                <span class="cover">{{ addInsuresData.coverMap }}</span>
            </el-upload>
        </el-form-item>
        <el-form-item label="上传详情图" prop="coverDetails">
            <el-upload
                class="upload-demo"
                action="http://localhost:3000/images//uploadImages"
                :show-file-list="false"
                :on-success="handleCoverDetails"
            >
                <el-button size="small" type="primary">点击上传</el-button>
                <span class="cover">{{ addInsuresData.coverDetails }}</span>
            </el-upload>
        </el-form-item>
        <el-form-item label="保单形式" prop="policy">
            <el-checkbox-group v-model="addInsuresData.policy">
                <el-checkbox label="电子保单" name="policy"></el-checkbox>
                <el-checkbox label="纸质保单" name="policy"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="保费" prop="price">
            <el-input
                v-model="addInsuresData.price"
                class="inputText"
                placeholder="请输入保费"
            ></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('addInsuresData')"
                >确认新增</el-button
            >
        </el-form-item>
    </el-form>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("insures");
export default {
    props: ["typeArr"],
    data() {
        return {
            addInsuresData: {
                //产品名称
                name: "",
                //描述
                brief: "",
                //产品封面
                coverMap: "",
                //产品详情
                coverDetails: "",
                //缴费类型
                payType: "",
                //保单形式
                policy: [],
                //价格
                price: "",
                //是否可续保
                renew: false,
                //适用人群
                suitableFor: "",
                //所属分类
                typesId: "",
            },
            rules: {
                //产品名称
                name: [
                    {
                        required: true,
                        message: "请输入保险名称",
                        trigger: "blur",
                    },
                ],
                //缴费类型
                payType: [
                    {
                        required: true,
                        message: "请选择缴费类型",
                        trigger: "change",
                    },
                ],
                //保单形式
                policy: [
                    {
                        type: "array",
                        required: true,
                        message: "请选择保单形式",
                        trigger: "change",
                    },
                ],
                //价格
                price: [
                    {
                        required: true,
                        message: "请输入保费",
                        trigger: "blur",
                    },
                ],
                //适用人群
                suitableFor: [
                    {
                        required: true,
                        message: "请选择适用人群",
                        trigger: "change",
                    },
                ],
                //所属分类
                typesId: [
                    {
                        required: true,
                        message: "请选择所属分类",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    methods: {
        ...mapActions(["addInsure", "getInsures"]),
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //所有值不为空时
                    this.addFun();
                }
                return false;
            });
        },
        //新增方法
        async addFun() {
            this.$emit("changeAddDialog");
            const { data } = await this.addInsure(this.addInsuresData);
            if (data.status) {
                this.$message({
                    type: "success",
                    message: "保险产品新增成功",
                });
                this.getInsures();
            } else {
                this.$message({
                    type: "info",
                    message: "保险产品新增失败",
                });
            }
        },
        handleCoverMap(res) {
            this.addInsuresData.coverMap = res.data[0];
        },
        handleCoverDetails(res) {
            this.addInsuresData.coverDetails = res.data[0];
        },
    },
};
</script>

<style>
.cover {
    margin-left: 10px;
}
</style>